<template>
  <div class="page">
    <h3>基本信息</h3>
    <detail-table :list="baseInfo" :info="form"></detail-table>
    <h3>回款信息</h3>
    <detail-table :list="outStandInfo" :info="form.returned" v-if="form.returned"></detail-table>
    <div v-if="!['4', '6', '7'].includes(form.saleType)">
      <h3>产品信息</h3>
      <detail-table :list="productInfo" :info="form.product"></detail-table>
    </div>
    <div class="mt20 detail-table" v-if="CouponInfo !== null">
      <h3>卡券赠送</h3>
      <zm-detail-table :list="sendCouponInfo" :info="CouponInfo"></zm-detail-table>
    </div>

    <!-- 包场规则 旧数据 isNew === '0' -->
    <div class="mt20 detail-table" v-if="form.saleType === '4' && form.isNew === '0'">
      <div v-for="(item, index) in form.bookRule.rule" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <tr v-for="(item1, index1) in cinemaInfoList" :key="index1" class="wp50">
            <template>
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ item['cinemaData']['relationType'] === '-1' ? '全部影院' : item['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + item['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(item, index)" v-if="item['cinemaData']['relationId'] !== '-1'">
                    点击查看
                  </a>
                  <span v-else>--</span>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>

    <!-- 包场规则 新数据 isNew === '1'-->
    <div class="mt20 detail-table" v-if="form.type === '4' && form.isNew === '1'">
      <div v-for="(item, index) in form.bookRule.rule" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <!-- <zm-detail-table :list="cinemaInfoList" :info="item"></zm-detail-table> -->
        <table cellspacing="0" cellpadding="0">
          <tr v-for="(item1, index1) in cinemaInfoList" :key="index1" class="wp50">
            <template>
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'cinemaType'" class="vm lh30">
                  {{ form.bookRule['cinemaData']['relationType'] === '-1' ? '全部影院' : form.bookRule['cinemaData']['relationType'] === '2' ? '指定影院' : '指定分组' + '--' + infoData.bookRule['cinemaData']['relationName']}}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <span v-if="item1.type === 'filmName'" class="vm lh30">
                  {{ item[item1.type]}}
                </span>
                <span v-if="item1.type === 'url'" class="vm lh30">
                  <a href="javascript:;" class="text-primary" @click="onCinemaDetail(form.bookRule['cinemaData']['relationId'])" v-if="form.bookRule['cinemaData']['relationId'] !== '-1'">
                    {{ form.bookRule['cinemaData']['relationName'] || '--' }}
                  </a>
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </template>
          </tr>
        </table>
      </div>
    </div>

    <!-- 实物销售单 -->
    <div class="mt20 detail-table" v-if="form.saleType === '6'">
      <div class="fb mb10">产品信息</div>
      <zm-table-data :data="form.product.productList.list" :columns="productListColumns" :show-page="false"></zm-table-data>
    </div>

    <!-- 文旅销售单 -->
    <div class="mt20 detail-table" v-if="form.saleType === '7'">
      <div v-for="(item, index) in form.wenlvRule.list" :key="index">
        <div class="mtb20 fb">{{'基础规则' + (index + 1)}}</div>
        <table cellspacing="0" cellpadding="0">
          <span v-for="(item1, index1) in wenlvInfoList" :key="index1">
            <tr class="vm wp50" v-if="!(+item.calculationMethod === 2 && ['unitPrice', 'joinCount'].includes(item1.label))">
              <td class="detail-table__name rlt">
                <span class="abs detail-table__name__icon" v-if="item1.hasIcon">※</span>
                <span class="tc">{{ item1.name }}</span>
              </td>
              <td class="detail-table__value">
                <span v-if="item1.label" class="vm lh30">
                  {{ item[item1.label] || "--" }}
                </span>
                <span v-if="item1.type === 'date'" class="vm lh30">
                  {{ item[item1.start] + '至' + item[item1.end]}}
                </span>
                <component v-if="item1.render" :is="handleJSX(item1.render)" />
              </td>
            </tr>
          </span>
        </table>
      </div>
    </div>

    <detail-container v-if="extendDetailParams.visible" v-model="extendDetailParams.visible" :id="extendDetailParams.id" :business-id="extendDetailParams.id" :is-show-btn="false" :type="extendDetailParams.type">
    </detail-container>
    <!-- 影城 -->
    <cinema-detail v-if="cinemaParams.visible" v-model="cinemaParams.visible" :id="cinemaParams.id" :obj="cinemaParams.obj" :is-new="cinemaParams.isNew"></cinema-detail>
  </div>
</template>

<script>
import DetailTable from '@/components/zmDetailTable'
import CinemaDetail from './CinemaDetail'
import { base, outStand, product, wenlv, cinemaInfoList, productListColumns, sendCouponInfo } from '../const'
import DetailContainer from '@/components/DetailContainer'

import { saveVoucher } from '@/api/src/returnedMoney'
import uploadApis from '@/api/src/upload'
export default {
  name: 'ReceivableDataInfo',
  components: {
    DetailTable,
    DetailContainer,
    CinemaDetail
  },
  props: {
    obj: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      base,
      outStand,
      product,
      wenlv,
      cinemaInfoList,
      form: {
        returned: '',
        product: ''
      },
      extendDetailParams: {
        visible: false,
        id: '',
        type: '',
        obj: {}
      },
      cinemaParams: {
        visible: false,
        obj: {},
        id: '',
        isNew: '0',
        idx: 0
      },

      CouponInfo: null
    }
  },
  computed: {
    baseInfo () {
      return this.base(this)
    },
    outStandInfo () {
      return this.outStand(this)
    },
    productInfo () {
      return this.product(this)
    },
    wenlvInfoList () {
      return this.wenlv(this)
    },
    productListColumns () {
      return productListColumns(this)
    },
    sendCouponInfo () {
      return sendCouponInfo(this)
    }
  },
  created () {
    this.getInfo()
    if (this.obj.isSendProgram === '1') {
      this.getProgramDetailInfo()
    }
  },
  methods: {
    async getInfo () {
      this.form = this.obj
    },
    onDetail () {
    },
    onExtendShow (id, type) {
      this.extendDetailParams = {
        visible: true,
        id: id,
        businessId: id,
        type: type
      }
    },
    onExport () {
      if (!this.form.enclosureUrl) {
        this.$message.warning('没有找到下载的资料,确认是否有上传')
        return
      }
      const a = document.createElement('a') // 创建a标签
      a.setAttribute('download', '')// download属性
      a.setAttribute('href', this.form.enclosureUrl)// href链接
      a.click()// 自执行点击事件
    },
    // async fileUpload (data) {
    //   let params = new FormData()
    //   params.append('fileData', data.file)
    //   const res = await uploadApis.uploadFile(params)
    //   // this.$set(this.form, 'enclosureUrl', res.url)
    //   const _data = {
    //     id: this.form.id,
    //     enclosureUrl: res.url,
    //     enclosureName: res.name
    //   }
    //   await saveVoucher(_data)
    //   this.$emit('after-save')
    //   return res.url
    // },
    onCinemaDetail (item, index) {
      // 查看影院信息
      /* this.cinemaParams = {
        visible: true,
        obj: row.cinemaData,
        idx: index
      } */
      this.cinemaParams = {
        visible: true,
        isNew: this.form.isNew,
        id: this.form.isNew === '1' ? item : '',
        obj: this.form.isNew === '0' ? item.cinemaData : {},
        idx: index
      }
    },
    async fileUpload (data) {
      let params = new FormData()
      params.append('fileData', data.file)
      const res = await uploadApis.uploadFile(params)
      const _data = {
        id: this.obj.id,
        enclosureUrl: res.url,
        enclosureName: res.name
      }
      await saveVoucher(_data)
      this.form.enclosureUrl = res.url
      return res.url
    },
    async getProgramDetailInfo () {
      this.CouponInfo = await getProgramDetail({ id: this.obj.sendProgramId })
    }
  }
}
</script>

<style scoped lang="scss">
.el-form-item {
  width: 50%;
}
.el-form-item__label {
  background: #ccc !important;
}

$color: #fafafa;
$height: 40px;
.detail-table {
  table {
    width: 100%;
    border: 1px solid #ebeef5;
    border-bottom: none;
    border-right: none;
    tr {
      display: inline-block;

      td {
        border-bottom: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        padding: 0 10px;
      }
    }
  }
  &__name {
    // height: $height;
    background: $color;
    text-align: center;
    width: 200px;
    display: inline-block;
    min-height: $height;
    line-height: 40px;
    &__icon {
      left: 10px;
    }
  }
  &__value {
    width: calc(100% - 205px);
    display: inline-block;
    min-height: $height;
    line-height: 30px;
  }
}
</style>
